<template>
  <div>
    <div class="tab-box">
      <div
        @click="changeRank(r.type)"
        class="item-pointer"
        :class="{ active: active == r.type }"
        v-for="r in ranking"
        :key="r.type"
      >
        {{ r.text }}
      </div>
    </div>
    <RankListView :ranking="ranking" :type="type" />
  </div>
</template>

<script>
import RankListView from "@/components/RankListView.vue";
export default {
  components: {
    RankListView,
  },
  data() {
    return {
      ranking: [
        { type: 3, text: "日漫榜" },
        { type: 4, text: "国漫榜" },
        { type: 1, text: "免费榜" },
      ],
      type: 3,
      active: 3,
    };
  },
  methods: {
    changeRank(type) {
      this.type = type;
      this.active = type;
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-box {
  width: 368px;
  height: 28px;
  margin: 12px auto;
  display: flex;
  justify-content: space-around;
  .item-pointer {
    width: 36px;
    height: 16px;
    padding: 6px 18px;
    font-size: 12px;
    color: #6c727e;
    background-color: #f5f7f8;
    border-radius: 14px;
  }
  .active {
    background-color: rgba(255, 95, 140, 0.08);
    color: #ff5f8c;
  }
}
</style>